<!--运行app.py文件，输出* Running on http://127.0.0.1:5000，点击可以进入网站-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📊 汽车数据分析平台 - 首页</title>
    <!-- 引入 Tailwind CSS CDN 。 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 自定义字体，确保在 Tailwind 之前定义 */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }
        /* 隐藏滚动条但允许滚动 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Custom CSS for submenu transition */
        /* Initially hidden state for smooth transition */
        .submenu-hidden {
            max-height: 0;
            overflow: hidden;
            /* Smooth transition for max-height */
            transition: max-height 0.3s ease-out;
        }
        /* Expanded state for smooth transition */
        .submenu-expanded {
            /* Sufficiently large max-height to show all items without knowing exact height */
            max-height: 200px;
            transition: max-height 0.3s ease-in;
        }

        /* Active menu item styling */
        .nav-item.selected {
            background-color: #2563eb; /* Tailwind blue-600 */
            color: #ffffff; /* White text */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-md */
        }
        /* Ensure icon color also changes when selected */
        .nav-item.selected i {
            color: #ffffff;
        }
        /* Darker hover effect for selected main items */
        .nav-item.selected:hover {
            background-color: #1d4ed8; /* Tailwind blue-700 */
        }

        /* Selected style for sub-navigation items */
        .nav-item.sub.selected {
            background-color: #bfdbfe; /* Tailwind blue-200 */
            color: #1e40af; /* Tailwind blue-800 */
            font-weight: 500; /* Slightly bolder for emphasis */
        }
        /* Ensure sub-item icon color also changes when selected */
        .nav-item.sub.selected i {
            color: #1e40af;
        }
        /* Darker hover effect for selected sub-items */
        .nav-item.sub.selected:hover {
            background-color: #93c5fd; /* Tailwind blue-300 */
        }

    </style>
</head>
<body class="flex min-h-screen bg-gray-100 text-gray-800">

    <!-- 侧边栏 -->
    <div class="sidebar w-64 bg-white shadow-xl p-6 flex-shrink-0 rounded-r-xl overflow-y-auto no-scrollbar">
        <h2 class="text-3xl font-extrabold text-blue-700 mb-10 text-center">
            <i class="fas fa-car-alt mr-2"></i>数据中心
        </h2>
        <nav>
            <!-- Each nav-item now has a data-page attribute for easier identification -->
            <div class="nav-item flex items-center gap-3 py-3 px-4 mb-3 rounded-lg text-gray-700 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="home" onclick="navigate('home', this)">
                <i class="fas fa-home text-lg"></i>
                <span class="font-medium">首页</span>
            </div>
            <div class="nav-item flex items-center gap-3 py-3 px-4 mb-3 rounded-lg text-gray-700 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="profile" onclick="navigate('profile', this)">
                <i class="fas fa-user-circle text-lg"></i>
                <span class="font-medium">个人中心</span>
            </div>
            <!-- 新增：汽车列表 -->
            <div class="nav-item flex items-center gap-3 py-3 px-4 mb-3 rounded-lg text-gray-700 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="car_list" onclick="navigate('car_list', this)">
                <i class="fas fa-list-alt text-lg"></i>
                <span class="font-medium">汽车列表</span>
            </div>
            <!-- Data Analysis Menu with Toggle -->
            <div class="nav-item flex items-center gap-3 py-3 px-4 mb-3 rounded-lg text-gray-700 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" id="menu-data">
                <i class="fas fa-chart-bar text-lg"></i>
                <span class="font-medium">数据分析</span>
                <!-- Arrow icon for submenu toggle -->
                <i class="fas fa-chevron-down ml-auto text-sm transition-transform duration-200" id="data-arrow"></i>
            </div>
            <!-- Submenu for Data Analysis, initially hidden with transition class -->
            <div class="sub-nav ml-6 mt-2 border-l-2 border-blue-200 pl-4 submenu-hidden" id="data-submenu">
                <div class="nav-item sub flex items-center gap-3 py-2 px-3 mb-2 rounded-lg text-gray-600 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="car_model" onclick="navigate('car_model', this)">
                    <i class="fas fa-car text-base"></i>
                    <span class="font-normal">车型分析</span>
                </div>
                <div class="nav-item sub flex items-center gap-3 py-2 px-3 mb-2 rounded-lg text-gray-600 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="price_analysis" onclick="navigate('price_analysis', this)">
                    <i class="fas fa-dollar-sign text-base"></i>
                    <span class="font-normal">价格分析</span>
                </div>
                <!-- 新增：汽车评分分析 -->
                <div class="nav-item sub flex items-center gap-3 py-2 px-3 mb-2 rounded-lg text-gray-600 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="car_rating" onclick="navigate('car_rating', this)">
                    <i class="fas fa-star-half-alt text-base"></i>
                    <span class="font-normal">汽车评分分析</span>
                </div>
                <!-- 新增：价格与马力分析 -->
                <div class="nav-item sub flex items-center gap-3 py-2 px-3 mb-2 rounded-lg text-gray-600 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="price_horsepower" onclick="navigate('price_horsepower', this)">
                    <i class="fas fa-tachometer-alt text-base"></i>
                    <span class="font-normal">价格与马力分析</span>
                </div>
            </div>
            <div class="nav-item flex items-center gap-3 py-3 px-4 mb-3 rounded-lg text-gray-700 hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors duration-200" data-page="admin" onclick="navigate('admin', this)">
                <i class="fas fa-cog text-lg"></i>
                <span class="font-medium">管理后台</span>
            </div>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main flex-1 p-8 overflow-y-auto no-scrollbar">
        <!-- 头部标题和描述 -->
        <div class="header bg-white p-6 rounded-xl shadow-md mb-8 border-b-2 border-blue-100">
            <h2 id="page-title" class="text-4xl font-extrabold text-gray-900 mb-3">欢迎使用汽车数据分析平台</h2>
            <p class="text-gray-600 text-lg">本平台基于大数据技术，提供全国汽车销售趋势、品牌车型分析及购车建议。</p>
        </div>

        <!-- 内容区域 -->
        <div class="content bg-white p-6 rounded-xl shadow-md min-h-[60vh]" id="page-content">
            <!-- 首页默认内容会通过JS加载 -->
        </div>
    </div>

    <script>
        /**
         * Removes the 'selected' class from all navigation items.
         */
        function removeSelectedClass() {
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('selected');
            });
        }

        /**
         * Navigates to a specified page and updates the content.
         * Also handles active menu item highlighting and content fade transition.
         * @param {string} page - The identifier of the page to navigate to (e.g., 'home', 'profile').
         * @param {HTMLElement} clickedElement - The navigation item element that was clicked.
         */
        function navigate(page, clickedElement) {
            const titleElement = document.getElementById("page-title");
            const contentElement = document.getElementById("page-content");

            // Remove 'selected' class from all items first to ensure only one is active
            removeSelectedClass();

            // Add 'selected' class to the clicked element, if provided
            if (clickedElement) {
                clickedElement.classList.add('selected');
            }

            // Add a fade-out transition class to the content area
            contentElement.classList.add('opacity-0', 'transition-opacity', 'duration-300');

            // Use a timeout to allow the fade-out transition to complete before changing content
            setTimeout(() => {
                let newTitle = "";
                let newContent = "";

                // Determine content based on the page
                if (page === 'home') {
                    newTitle = "欢迎使用汽车数据分析平台";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">📌 核心数据概览</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div class="bg-blue-50 p-6 rounded-lg shadow-sm border border-blue-200 flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-blue-600 font-medium">总销量 (本月)</p>
                                    <p class="text-3xl font-bold text-blue-800 mt-1">12.5 万</p>
                                </div>
                                <i class="fas fa-car-side text-blue-400 text-4xl"></i>
                            </div>
                            <div class="bg-green-50 p-6 rounded-lg shadow-sm border border-green-200 flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-green-600 font-medium">市场增长率</p>
                                    <p class="text-3xl font-bold text-green-800 mt-1">+8.2%</p>
                                </div>
                                <i class="fas fa-arrow-up text-green-400 text-4xl"></i>
                            </div>
                            <div class="bg-yellow-50 p-6 rounded-lg shadow-sm border border-yellow-200 flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-yellow-600 font-medium">热门车型</p>
                                    <p class="text-3xl font-bold text-yellow-800 mt-1">Model Y</p>
                                </div>
                                <i class="fas fa-fire text-yellow-400 text-4xl"></i>
                            </div>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">📈 销售趋势分析</h4>
                            <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500">
                                <p class="text-lg">此处将展示月度/季度销售趋势图表。</p>
                                <p class="text-sm mt-2">（例如：使用 ECharts 或 Chart.js 渲染的折线图）</p>
                            </div>
                        </div>
                    `;
                } else if (page === 'profile') {
                    newTitle = "👤 个人中心";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">个人信息设置</h3>
                        <form id="profile-form" class="space-y-6 max-w-lg">
                            <div>
                                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名：</label>
                                <input type="text" id="username" value="admin" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱：</label>
                                <input type="email" id="email" value="admin@example.com" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号：</label>
                                <input type="text" id="phone" value="13800138000" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>
                            <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                                <i class="fas fa-save mr-2"></i>保存修改
                            </button>
                        </form>
                    `;
                } else if (page === 'car_list') {
                    newTitle = "🚗 汽车列表";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">所有汽车型号概览</h3>
                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500 h-80 flex items-center justify-center relative">
                            <p class="text-lg">此处将展示汽车型号的详细列表，包含图片、价格、配置等。</p>
                            <p class="text-sm absolute bottom-4">（例如：可筛选、排序的汽车列表）</p>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">热门新车推荐</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
                                    <img src="https://placehold.co/300x200/E0F2F7/000?text=New+Car+A" alt="New Car A" class="w-full h-40 object-cover rounded-md mb-3">
                                    <h5 class="font-semibold text-lg">新车 A 型号</h5>
                                    <p class="text-blue-600 font-bold">¥ 15.8 万起</p>
                                    <p class="text-gray-500 text-sm">紧凑型轿车，高性价比</p>
                                </div>
                                <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
                                    <img src="https://placehold.co/300x200/E0F2F7/000?text=New+Car+B" alt="New Car B" class="w-full h-40 object-cover rounded-md mb-3">
                                    <h5 class="font-semibold text-lg">新车 B 型号</h5>
                                    <p class="text-blue-600 font-bold">¥ 22.5 万起</p>
                                    <p class="text-gray-500 text-sm">中型SUV，智能驾驶</p>
                                </div>
                                <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
                                    <img src="https://placehold.co/300x200/E0F2F7/000?text=New+Car+C" alt="New Car C" class="w-full h-40 object-cover rounded-md mb-3">
                                    <h5 class="font-semibold text-lg">新车 C 型号</h5>
                                    <p class="text-blue-600 font-bold">¥ 35.0 万起</p>
                                    <p class="text-gray-500 text-sm">豪华电动轿车，长续航</p>
                                </div>
                            </div>
                        </div>
                    `;
                } else if (page === 'car_model') {
                    newTitle = "🚗 车型分析";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">热门车型销量对比</h3>
                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500 h-80 flex items-center justify-center relative">
                            <p class="text-lg">此处将展示各车型销量柱状图。</p>
                            <p class="text-sm absolute bottom-4">（数据来源：全国汽车销售数据）</p>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">车型详细数据</h4>
                            <table class="min-w-full divide-y divide-gray-200 rounded-lg overflow-hidden shadow-sm">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">车型</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">品牌</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">月销量</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">同比增幅</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">Model Y</td>
                                        <td class="px-6 py-4 whitespace-nowrap">特斯拉</td>
                                        <td class="px-6 py-4 whitespace-nowrap">25,000</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-green-600">+15%</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">秦 PLUS DM-i</td>
                                        <td class="px-6 py-4 whitespace-nowrap">比亚迪</td>
                                        <td class="px-6 py-4 whitespace-nowrap">22,000</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-green-600">+12%</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">轩逸</td>
                                        <td class="px-6 py-4 whitespace-nowrap">日产</td>
                                        <td class="px-6 py-4 whitespace-nowrap">18,500</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-red-600">-5%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    `;
                } else if (page === 'price_analysis') {
                    newTitle = "💰 车型与价格分析";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">不同价格区间销量分布</h3>
                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500 h-80 flex items-center justify-center relative">
                            <p class="text-lg">此处将展示不同价格区间的销量分布图表。</p>
                            <p class="text-sm absolute bottom-4">（例如：使用 ECharts 或 Chart.js 渲染的饼图或柱状图）</p>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">价格区间购车建议</h4>
                            <ul class="list-disc list-inside space-y-2 text-gray-700">
                                <li><span class="font-semibold">10万以下：</span>经济实用型轿车、小型SUV选择较多。</li>
                                <li><span class="font-semibold">10-20万：</span>紧凑型轿车、主流SUV、部分新能源车型。</li>
                                <li><span class="font-semibold">20-30万：</span>中型轿车、中型SUV、豪华品牌入门级车型。</li>
                                <li><span class="font-semibold">30万以上：</span>豪华品牌、高性能车型、高端新能源车。</li>
                            </ul>
                        </div>
                    `;
                } else if (page === 'car_rating') {
                    newTitle = "⭐ 汽车评分分析";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">用户评分与评价概览</h3>
                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500 h-80 flex items-center justify-center relative">
                            <p class="text-lg">此处将展示各车型平均用户评分、评分分布图等。</p>
                            <p class="text-sm absolute bottom-4">（例如：基于用户评论的词云图、评分趋势）</p>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">热门车型评分详情</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
                                    <h5 class="font-semibold text-lg mb-2">特斯拉 Model 3</h5>
                                    <div class="flex items-center mb-2">
                                        <span class="text-yellow-500 text-xl mr-2">★★★★☆</span>
                                        <span class="text-gray-700 font-bold">4.5 / 5.0</span>
                                    </div>
                                    <p class="text-gray-600 text-sm">用户评价：加速快，科技感强，但内饰简洁。</p>
                                </div>
                                <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
                                    <h5 class="font-semibold text-lg mb-2">比亚迪 汉 EV</h5>
                                    <div class="flex items-center mb-2">
                                        <span class="text-yellow-500 text-xl mr-2">★★★★☆</span>
                                        <span class="text-gray-700 font-bold">4.3 / 5.0</span>
                                    </div>
                                    <p class="text-gray-600 text-sm">用户评价：续航扎实，外观大气，性价比高。</p>
                                </div>
                            </div>
                        </div>
                    `;
                } else if (page === 'price_horsepower') {
                    newTitle = "🐎 价格与马力分析";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">价格与马力关系散点图</h3>
                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500 h-80 flex items-center justify-center relative">
                            <p class="text-lg">此处将展示汽车价格与马力（或功率）的散点图。</p>
                            <p class="text-sm absolute bottom-4">（例如：揭示性价比车型、高性能车型分布）</p>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">不同马力区间的车型推荐</h4>
                            <ul class="list-disc list-inside space-y-2 text-gray-700">
                                <li><span class="font-semibold">100-150 马力：</span>适合城市通勤，经济省油。</li>
                                <li><span class="font-semibold">150-200 马力：</span>动力充足，兼顾家用和长途。</li>
                                <li><span class="font-semibold">200-300 马力：</span>运动性能提升，驾驶乐趣更佳。</li>
                                <li><span class="font-semibold">300+ 马力：</span>高性能车型，极致驾驶体验。</li>
                            </ul>
                        </div>
                    `;
                } else if (page === 'admin') {
                    newTitle = "🔧 管理后台";
                    newContent = `
                        <h3 class="text-2xl font-semibold text-gray-800 mb-6">用户管理</h3>
                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500">
                            <p class="text-lg">此处将展示用户列表和管理功能。</p>
                            <p class="text-sm mt-2">（例如：用户增删改查、权限管理）</p>
                        </div>
                        <div class="mt-8">
                            <h4 class="text-xl font-semibold text-gray-800 mb-4">系统日志</h4>
                            <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center text-gray-500 h-40 overflow-y-auto">
                                <p class="text-sm text-left">2023-10-26 10:30:00 - 用户 'admin' 登录成功。</p>
                                <p class="text-sm text-left">2023-10-26 10:35:15 - 数据更新任务完成。</p>
                                <p class="text-sm text-left">2023-10-26 10:40:02 - 用户 'guest' 尝试访问管理页面，权限不足。</p>
                                <p class="text-sm text-left">2023-10-26 10:45:30 - 系统备份开始。</p>
                            </div>
                        </div>
                    `;
                }

                // Update the page title and content
                titleElement.innerText = newTitle;
                contentElement.innerHTML = newContent;

                // Remove the fade-out class and add fade-in class to make content visible again
                contentElement.classList.remove('opacity-0');
                contentElement.classList.add('opacity-100');
            }, 100); // The timeout duration should match the CSS transition duration
        }

        // Event listener for the "数据分析" menu item to toggle its submenu
        document.getElementById("menu-data").addEventListener("click", function () {
            const submenu = document.getElementById("data-submenu");
            const arrow = document.getElementById("data-arrow");

            // Toggle the 'submenu-expanded' and 'submenu-hidden' classes for smooth animation
            submenu.classList.toggle('submenu-expanded');
            submenu.classList.toggle('submenu-hidden');

            // Toggle the arrow icon direction based on submenu state
            if (submenu.classList.contains('submenu-expanded')) {
                arrow.classList.remove('fa-chevron-down');
                arrow.classList.add('fa-chevron-up');
            } else {
                arrow.classList.remove('fa-chevron-up');
                arrow.classList.add('fa-chevron-down');
            }
        });

        // Ensures the '首页' is active and its content is loaded when the page first loads
        document.addEventListener('DOMContentLoaded', () => {
            const homeNavItem = document.querySelector('.nav-item[data-page="home"]');
            if (homeNavItem) {
                navigate('home', homeNavItem);
            }
        });

    </script>

</body>
</html>